<template>
  <div class="ChildPage TablePage">
    <vb-table :option="option" ref="table"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @on-load="getList">
      <template #table-name="scope">
        <el-tooltip content="系统菜单" v-if="scope.row.isSystem">
          <b class="el-icon-setting prop-icon"></b>
        </el-tooltip>
        {{scope.row.name}}
      </template>
    </vb-table>
  </div>
</template>

<script>
  export default {
    mixins: [],
    components: {
    },
    data() {
      let self = this
      return {
        option: {
          selection: false,
          menuWidth: 200,
          column: [
            {
              label: "菜单名称",
              prop: "name",
              search: {
                show: true,
                label: "关键词",
                prop: "keyword",
                hiddenLabel: true,
                placeholder: "\ue605 菜单名称/路由/编号"
              },
              form: {
                rules: [
                  {
                    required: true,
                    message: "请输入菜单名称",
                    trigger: "click"
                  }
                ],
              },
            },
            {
              label: "菜单图标",
              prop: 'source',
              type: "icon",
              align: "center",
              width: 80
            },
            {
              label: "菜单类型",
              prop: 'category',
              align: "center",
              type: "radio",
              radioButton: true,
              dicId: "id",
              dicLabel: "label",
              width: 80,
              dicData: [
                {
                  id: "menu",
                  label: "菜单"
                },
                {
                  id: "btn",
                  label: "按钮"
                }
              ],
              search: {
                show: true,
              },
              form: {
                default: "menu",
                rules: [
                  {
                    required: true,
                    message: "请选择菜单类型",
                    trigger: "click"
                  }
                ],
              },
            },
            {
              label: "路由路径",
              showProp: 'routerPath',
              formShow: false,
            },
            {
              label: "页面路径",
              showProp: 'pagePath',
              formShow: false,
            },
            {
              label: "跳转路由",
              prop: 'routerId',
              type: "select",
              tableShow: false,
              dicLabel: "name",
              form: {
                vIf: function (row, form) {
                  return form.category === 'menu'
                },
                filterable: true,
                remoteMethod: function (row, form, done) {
                  self.getRouterList(done)
                }
              },
            },
            {
              label: "上级菜单",
              prop: 'parentId',
              tableShow: false,
              type: "tree",
              dicData: [],
              treeProps: {
                checkStrictly: true,
                emitPath: false,
                label: "name",
                value: "id"
              }
            },
            {
              label: "菜单编号",
              prop: "code",
              form: {
                rules: [
                  {
                    required: true,
                    message: "请输入菜单编号",
                    trigger: "click"
                  }
                ],
              },
            },
            {
              label: "菜单排序",
              prop: "sort",
              type: "inputNumber",
              width: 80,
              align: "center",
              form: {
                default: 1,
                rules: [
                  {
                    required: true,
                    trigger: "click"
                  }
                ],
              },
            },
            {
              label: "菜单备注",
              prop: 'remark',
              type: "textarea",
              tableHidden: true,
              form: {
                span: 24,
              }
            }
          ],
          page: {
            show: false
          },
          handleBtnList: [
            {
              key: "edit",
              vIf: function (item) {
                return !item.isSystem
              }
            },
            {
              key: "delete",
              vIf: function (item) {
                return !item.isSystem
              }
            },
            {
              label: "添加子项",
              icon: "el-icon-circle-plus-outline",
              type: "text",
              callback: function (row) {
                self.addChild(row)
              }
            },
          ]
        }
      }
    },
    computed: {},
    async mounted() {
    },
    methods: {

      /**
       * 查询数据列表信息
       * @param page
       * @param size
       * @param search 检索条件
       * @param done
       */
      getList (page, size, search, done) {
        let self = this
        this.$api.getMenuList(Object.assign({
          pageIndex: page,
          pageSize: size
        }, search)).then(res => {
          let find = self.option.column.find(item => {
            return item.prop === 'parentId'
          })
          if (find) find.dicData = res.data
          done(res)
        })
      },

      /**
       * 新增数据处理
       * @param form
       * @param done
       */
      rowSave (form, done) {
        this.$api.addMenu(form).then((res) => {
          done(res)
        })
      },

      /**
       * 更新数据处理
       * @param form
       * @param done
       */
      rowUpdate (form, done) {
        this.$api.updateMenu(form).then((res) => {
          done(res)
        })
      },

      /**
       * 删除数据处理
       * @param ids
       * @param done
       */
      rowDel (ids, done) {
        this.$api.deleteMenu({
          ids: ids
        }).then((res) => {
          done(res)
        })
      },

      /**
       * 添加子项
       * @param row
       */
      addChild (row) {
        this.$refs.table.openDialog({
          parentId: row.id,
          router: row.router + '/'
        })
      },

      /**
       * 查询页面路由
       * @param row
       * @param done
       */
      getRouterList (done) {
        this.callApi("getRouterList", {
          pageSize: 10000
        }).then(res => {
          done(res.data)
        })
      }
    },
    watch: {

    }
  }
</script>

<style lang="scss" scoped>
.prop-icon {
  margin-right: 1px;
  font-weight: bold;
  color: var(--primary)
}
</style>
